import { defineComponent, reactive, ref } from "vue";
import Popup from "@/components/Popup/Popup";
import styles from "./JsonPreview.module.less";
import VueJsonPretty from "vue-json-pretty";
import 'vue-json-pretty/lib/styles.css';
import fetchBase64AsUint8Array from "@/common/utils/fetchBase64AsUint8Array";
import pako from "pako";
export default defineComponent({
  props: {
    service: {
      type: Object,
    }
  },
  setup(props, { expose }) {
    const popupRef = ref(null as any);
    const state = reactive({
      title: "",
      json: {},
    });
    const open = async ({
      title,
      jsonStr
    }: {
      title: string,
      jsonStr: string,
    }) => {
      state.title = title;
      try {
        let events_pako_return = "";
        const uint8Arr = await fetchBase64AsUint8Array(jsonStr);
        events_pako_return = new TextDecoder().decode(pako.inflate(uint8Arr));
        events_pako_return = decodeURIComponent(events_pako_return);
        state.json = JSON.parse(events_pako_return);
      } catch { }
      popupRef.value.open();
    }
    expose({
      open,
    })
    return () => (
      <Popup ref={popupRef} title={state.title} width="800px" oriState={state} v-slots={{
        footer: () => <>
          <a-button onClick={() => { popupRef.value.close() }}>关闭</a-button>
        </>
      }}>
        <div class={styles.container}>
          <VueJsonPretty data={state.json}/>
        </div>
      </Popup>
    )
  }
})